<template>
  <div class="searchArticle">

    <div class="title">文章</div>



    <ul class="artice-result" v-if="haveList">
      <li class="clearfix artice" v-for="item in searchArticle" v-on:click="gotoAddress('/content/article/'+item.article_id)" >
        <div class="fl">
          <!--<img :src="item.cover ||'https://dummyimage.com/100x100' " alt="">-->
          <img v-if="item.cover!=null" :src="item.cover" :onerror="logo" alt="">
          <img v-if="item.cover==null" src="../../assets/default.png" alt="">
        </div>
        <div class="fr">
          <div class="ms">{{item.subject}}</div>
          <div class="time-box">
            <span class="time">{{item.date_added}}</span>
            <!--<img src="../../assets/search/a3.png" class="follow" alt="" /><i>{{item.liketimes}}</i>-->
            <img src="../../assets/search/a4.png" class="pinglun" alt="" /><i>{{item.commenttimes}}</i>
          </div>
        </div>
      </li>
    </ul>
    <div class="next-btn" v-if="showMore">
      <mt-button type="danger" size="large" @click="addMoreGoods">加载更多</mt-button>
    </div>
		<!--<div class="next-btn" v-if="!haveDate">-->
      <!--<mt-button type="danger" size="large" disabled>无更多文章</mt-button>-->
    <!--</div>-->
    <div class="no-result" v-if="!haveList" style="display: none">
      <div class="no">
      <img src="../../assets/search/a5.png" alt="" />
      </div>
      <div class="no-text">没有相关信息</div>
    </div>
  </div>
</template>

<script>
import {Toast} from "mint-ui"
export default {
  name: 'SearchArtical',
  data () {
    return {
        searchArticle:[],
        haveList:false,
        curPage:1,
        haveDate:true,
        showMore:false,
        logo: 'this.src="' + require('../../assets/default.png') + '"'

    }
  },
  mounted:function() {
    this.initData(this.curPage)
  },
  methods: {
  	addMoreGoods(){
  		this.curPage++;
  		this.initData(this.curPage)
  	},
    initData:function(curPage){
      //alert(this.$route.query.keyword);
      var _this = this;
      //hotSearch
      var ajaxData = {};
      ajaxData.keyword = this.$route.query.keyword;
      ajaxData.type = this.$route.query.type;
      ajaxData.page = curPage;
      $.ajax({
        type:'post',
        url: RouteMap.searchArticle,
        data:ajaxData,
        success:function(res){
          if(res.code == 200){

            if(curPage < res.data.maxpage){
              _this.showMore = true;
            }

            if(res.data.list.length==0 || curPage == res.data.maxpage){

              _this.showMore = false;
            }

            if(!utilities.isNull(res.data.list)){
          		if(curPage <= res.data.maxpage){
          			_this.haveDate = true;
          			_this.searchArticle = _this.searchArticle.concat(res.data.list);
          		}else{
          			_this.haveDate = false;
          		}
          	}else{
          		_this.haveDate = false;
          	}
            if(_this.searchArticle[0]){
              _this.haveList = true;
            }
            else{
              $('.no-result').show();
            }
          }
          else{
            //Toast(res.msg)
          }
        }
      })
    },
      gotoAddress(path){
        this.$router.push(path)
      }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.searchArticle{background:#fff; padding-top: 0.5rem; color:#707070;}


.artice{
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid #eee;
}
.artice .fl{
  width: 5rem;
}
.artice .fl img{
  width: 100%;
}
.artice .fr{
  width: 9.3rem;
  height: 3.5rem;
  font-size: 0.6rem;
}
.artice .fr .ms{
  margin-top: 0.5rem;
  font-size: .6rem;
}
.time-box{
  margin-top: 0.7rem;
  font-size: .4rem;
}
.time-box span,.time-box i,.time-box img{
  vertical-align: middle;
}
.time-box .time{
  width: 7rem;
  display: inline-block;
}
.time-box .follow{
  display: inline-block;
  width: 0.6rem;
  margin-right: 0.2rem;
}
.time-box .pinglun{
  display: inline-block;
  width: 0.5rem;
  margin-right: 0.2rem;
  margin-left: 0.2rem;
}
.next-btn{
  padding: 0 0.5rem;
  padding-bottom: 2rem;
  margin-top: 1rem;
}
.no-result{
  text-align: center;
  color: #dedede;
  font-size: 0.5rem;
  padding: 6rem 0;
}
.no-result .no img{
  width: 2rem;
  padding-bottom: .5rem;
}
.title{
  border-bottom: 1px solid #eee;
  padding: 0.4rem 0.5rem;
  font-size:.65rem;
  color: #b01f24;
}
.artice-result{
  /*padding:.4rem .5rem;*/
}
</style>
